<template>
  <el-row class="footer-container">
    <!-- 关于我们 -->
    <el-col :span="8" class="footer-section">
      <h3 class="footer-heading">关于我们</h3>
      <p class="text-gray">提供优质的图书资源，为读者提供最好的阅读体验。</p>
      <div class="social-links">
        <router-link to="/" class="social-link">
          <i class="fa-brands fa-facebook">欢</i>
        </router-link>
        <router-link to="/" class="social-link">
          <i class="fa-brands fa-twitter">迎</i>
        </router-link>
        <router-link to="/" class="social-link">
          <i class="fa-brands fa-instagram">光</i>
        </router-link>
        <router-link to="/" class="social-link">
          <i class="fa-brands fa-linkedin">临</i>
        </router-link>
      </div>
    </el-col>

    <!-- 快速链接 -->
    <el-col :span="8" class="footer-section">
      <h3 class="footer-heading">快速链接</h3>
      <ul class="footer-links">
        <li><router-link to="/userCenter" class="footer-link">个人中心</router-link></li>
        <li><router-link to="/login" class="footer-link">登录</router-link></li>
        <li><router-link to="/register" class="footer-link">注册账号</router-link></li>
      </ul>
    </el-col>

    <!-- 联系我们 -->
    <el-col :span="8" class="footer-section">
      <h3 class="footer-heading">联系我们</h3>
      <ul class="contact-info">
        <li class="contact-item">
          <i class="fa fa-phone"></i>
          <span>400-123-4567</span>
        </li>
        <li class="contact-item">
          <i class="fa fa-envelope"></i>
          <span>contact@bookstore.com</span>
        </li>
        <li class="contact-item">
          <i class="fa fa-clock-o"></i>
          <span>周一至周日 9:00-21:00</span>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<style scoped>
.footer-container {
  font-size: 12px;
  color: #666;
  /* 深灰色文本 */
  background-color: #f8f8f8;
  /* 浅灰色背景 */
  width: 100%;
  padding: 30px 100px;
  /* 增加垂直内边距 */
  border-top: 1px solid #e8e8e8;
  /* 顶部边框分隔线 */
}

.footer-section {
  margin-bottom: 20px;
  /* 底部间距 */
}

.footer-heading {
  color: #333;
  /* 深灰色标题 */
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
  /* 标题与内容间距 */
}

.text-gray {
  color: #999;
  /* 浅灰色描述文字 */
  margin-bottom: 20px;
  /* 描述与图标间距 */
}

/* 社交链接样式 */
.social-links {
  display: flex;
  gap: 10px;
  /* 图标间距 */
}

.social-link {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* 圆形图标 */
  background-color: #e8e8e8;
  /* 图标背景色 */
  color: #666;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  /* 过渡动画 */
}

.social-link:hover {
  background-color: #666;
  /* 悬停深色背景 */
  color: #fff;
  /* 白色图标 */
}

/* 快速链接列表样式 */
.footer-links {
  list-style: none;
  /* 移除默认列表标记 */
  padding-left: 0;
}

.footer-link {
  color: #666;
  text-decoration: none;
  /* 移除下划线 */
  display: block;
  padding: 5px 0;
  /* 链接垂直间距 */
  transition: color 0.3s;
  /* 颜色过渡 */
}

.footer-link:hover {
  color: #4a90e2;
  /* 品牌色悬停效果 */
  text-decoration: underline;
  /* 悬停下划线 */
}

/* 联系信息样式 */
.contact-info {
  list-style: none;
  padding-left: 0;
}

.contact-item {
  margin: 8px 0;
  /* 列表项间距 */
  display: flex;
  align-items: center;
  gap: 8px;
  /* 图标与文字间距 */
}

.contact-item i {
  width: 18px;
  /* 图标宽度 */
  text-align: center;
}

.contact-item span {
  line-height: 1.4;
}
</style>